<template>
    <div class="home-nav">
      <ul>
        <router-link
          v-for="(item,index) in menu"
          :key="index"
          tag="li"
          :to="item.path"
          :class="{'active':index===$route.meta.index}">
            
            <span>{{item.name}}</span>
          
          </router-link>
      </ul>
    </div>
</template>

<script>
export default {
  data () {
    return {
      current: 0,
      menu: [
        { index: 0, id: 4, name: '专题导览', path: '/thematicGuide/anualwj' },
        { index: 1, id: 0, name: '用地腾退', path: '/monitoringindex/ttyd' },
        { index: 2, id: 1, name: '违建拆除', path: '/monitoringindex/wjcc' },
        { index: 3, id: 2, name: '人口疏解', path: '/monitoringindex/rksj' },
        { index: 4, id: 3, name: '产业提质', path: '/monitoringindex/cytz' }
      ],
      modelMijiDict:{0:"机密",1:"机密",2:"机密",3:"机密",4:"机密"}
    }
  },
  methods: {
    changeHandle (item) {
      // this.curColorIndex = 0
      // if (item.id !== 4) this.$store.dispatch('changeColorIndex', item.id)
      // console.log('菜单选择：')
      // console.log(item)
      // this.current = 100
      // this.$router.push(item.path)
      /**
       * 注意：以防加载多遍
       * （1）使用了changeParamsObj；
       * （2）不能分别触发每一个方法 如：changemonth.changeyear...
       */
      // ~~~~~~~~~~~重置各要素指标（年份，月份，指标index，空间选择北京市）~~~~~~~~~~
      // if (this.$route.path !== '/spotsdetail') {
      //   this.$store.dispatch('changeParamsObj', {
      //     year: '2019',
      //     month: '13',
      //     regioncode: '110000',
      //     regionname: '北京',
      //     regionlevel: '1'
      //   })
      // }
    }
  },
  created(){
    if(this.$route.query.uid){
      localStorage.setItem('uid', this.$route.query.uid);
      localStorage.setItem('name', this.$route.query.name);
      localStorage.setItem('model', this.$route.query.model);
    }
  }
}
</script>

<style lang="stylus" scoped>
.home-nav {
  height: 65px;
  width: 100%;
  padding-left: 38px;
  padding-top: 5px;

  ul {
    border-top: 2px solid #1a55b9;
    width: 775px;
    margin: 0 auto;

    li {
      display: inline-block;
      height: 50px;
      width: 151px;
      margin-right: 5px;
      background: url('../assets/nav2.png') no-repeat;
      text-align: center;
      // line-height: 50px;
      // font-size: 20px;
      // text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
      // font-weight: bold;
      cursor: pointer;

      &:last-child {
        margin-right: 0;
      }

      &.active {
        background: url('../assets/nav1.png') no-repeat;
      }
      span {
        line-height: 50px;
        font-size: 20px;
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
        font-weight: bold;
      }
      sup{
          font-size: 1px;
          top: -13.5em;
          font-weight: normal;
      }
    }
  }
}
</style>
